import React from 'react';
import {
  Form,
  Input,
  Button,
  Card,
  Radio,
  Switch
} from 'antd';
import { message } from 'antd';

import { useOrder } from "../../hook/order";


const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};


export default () => {

  const [, { addOrder }] = useOrder();

  const [form] = Form.useForm();
  // 表单提交触发函数
  const onFinish = async (values) => {
    const { commodities } = values;
    values.commodities = [commodities];
    values.isAffirmReceive = values.isAffirmReceive === true ? 1 : 0;
    values.isPaySuccess = values.isPaySuccess === true ? 1 : 0;
    const data = await addOrder(values);
    if (data._id) {
      message.loading({ content: '新增中...', key: "updatable" });
      setTimeout(() => {
        message.success({ content: '新增成功!', key: "updatable", duration: 2 });
      }, 500);
    }
  };

  return (
    <Card title="订单新增" style={{ width: "100%" }}>

      <Form
        {...formItemLayout}
        form={form}
        name="register"
        onFinish={onFinish}
        style={{ width: 500 }}
        labelCol={{ span: 5, offset: 3 }}

      >
        <Form.Item
          name="orderTime"
          label="下单时间"
          rules={[

            {
              required: true,
              message: '请输入下单时间!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="totalPrice"
          label="总价"
          rules={[

            {
              required: true,
              message: '请输入总价!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="userId"
          label="下单用户id"
          rules={[

            {
              required: true,
              message: '请输入下单用户id!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="commodities"
          label="商品"
          rules={[

            {
              required: true,
              message: '请输入商品!',
            },
          ]}
        >
          <Input />
        </Form.Item>


        <Form.Item name="isPaySuccess" label="是否付款" valuePropName="checked" rules={[{ required: true, message: '请输入是否付款!' }]} >
          <Switch checked={false} />
        </Form.Item>



        <Form.Item name="isAffirmReceive" label="是否收货" valuePropName="checked" rules={[{ required: true, message: '请输入是否到货!' }]} >
          <Switch checked={true} />
        </Form.Item>


        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            新增
          </Button>
        </Form.Item>
      </Form>
    </Card >
  )
}